Beautiful Router Animations with Angular

111,247 views Feb 11, 2019 Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angul

…

...more

...more

1.33M subscribers

Comments

112

Add a comment...

Islam Elsayed

Hello, why this error console (.Unable to process animations - returned zero elements ) !?

Damian Boryga

I love that i don't have to spent 30mins on watching tutorial about how to install angular cli and all the basics when i just need what i'm searching for. Thank you <3

CodingCatDev

3 years ago (edited)

Beautiful job as always Jeff! I was just working on page flips for the same. Are there any suggestions on when to do animation work using CSS directly vs using Angular Animations?

View 3 replies from Fireship and others

Reynaldo Columna

I needed this tutorial so bad, man! Came right in the nick of time too :)

View reply from Fireship

ANUJ GROVER

3 years ago (edited)

Thank you for all such creative tutorials 🧡

View reply from Fireship

Mateus Carniatto

Awesome video!! Could this also be used with lazy loaded routes?

View reply from Fireship

Oleh Kopyl

1 month ago (edited)

Thanks a lot for a great video. But the problem with this approach is that when you open a route for the first time, it slides from left or right, but what if I want it to slide only when I switch manually and not when I open them from the first time from URL? Basically, I need to cancel the animation if a user comes from the same route or just opened the route for the first time.

Narendra Singh Rathore

3 years ago (edited)

Great video on animations. Waiting something on dynamic components, ng-content, ng-container, content management in angular,( for.eg angular.io ) some advance angular concepts.

T L

Thanks for saving my class project by the due day. You are such a brilliant guy.

kamlesh merugu

Way to go, looking forward for some more awesome videos

Mark Statkus

I tested this out.. chrome fairly smooth, other browsers 1 to 2 FPS. I wish there was a easier way to do this using GSAP or just straight CSS.

Son Of Troy

This is awesome! What can I do to get the deep understanding of code the way you do

View reply from Fireship

B

Route animations behave very weird if your pages have scrollbars. Also on Firefox Mobile cause tearing and rendering problems

Juan Mario Valderrama

When I use AOT in "ng build --aot=true", it shows an error: "Functions expressions are not supported in decorators in x references x. Consider changing the function expression into an exported function". But, when I change it to "export function", it shows the same error. Some ideas?

MrPorridge

Hi Jeff, I've followed your tutorial and the animations work great when using ng serve, but when I try to ng build --prod, I get this error: ERROR in src\app\recipe-builder\recipe-builder.component.ts(9,16): Error during template compile of 'RecipeBuilderComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at src\app\recipe-builder\route-animations.ts(37,10) Any idea why this might be the case for building to production? Thanks

Read more

Lars Rye Jeppesen

ERROR in app/main/containers/app/app.component.ts(32,5): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at app/main/containers/app/route-animations.ts(20,10).

yassine khe

thanks for the tuto but How I can use the same animation only between some components and not all of the application?

Shy Agam

3 years ago (edited)

This doesn't seem to compile when building with ng build --prod . The AOT compiler doesn't like the [direction] key specification. A workaround is to create a function that returns the direction object: export function dir(direction: 'left' | 'right', value: number | string ) { return direction === 'left' ? { left: value } : { right: value }; } Then call it like so: style(dir(direction, 0)) . Now it's possible to keep using the same animation function without duplicating it for each direction. ( ! ) Notice the export keyword as the AOT compiler requires it.

Read more

Jose Gonzalez

I get this error but the animations still work. ``` core.js:15713 ERROR Error: Unable to process animations due to the following failed trigger transitions @routeAnimations has failed due to: - `query(":enter, :leave")` returned zero elements. (Use `query(":enter, :leave", { optional: true })` if you wish to allow this.) - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.) - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.) ```

Read more

Jeremy Sistrunk

How do you ensure smooth animations using resolveGuard?

Juan Cruz

Hi, how can i add this transitions/animations to another routing ? I havnt got all the components in AppRoutingModule. Thanks!

Islam Elsayed

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angular-r... - Deal Crunch App https://play.google.com/store/apps/de... - Angular Router https://angular.io/guide/router - Angular Animations https://angular.io/guide/animations

Islam Elsayed

Hello, why this error console (.Unable to process animations - returned zero elements ) !?